<template>
    <div class="orderDetail">
        <div class="topBox">
            <img class="leftImg" src="../../static/imgs/left_b.png" @click="handleBack" alt="">
            <div class="title">
                {{ $t('assemble.订单详情') }}
            </div>
        </div>


        <div class="stepsBox">
            <van-steps direction="vertical" active-color="#0061D2" :active="dataAll.state">
                <van-step>
                    <p class="titletext">{{ $t('assemble.提交成功') }}</p>
                </van-step>
                <van-step>
                    <p class="titletext">{{ $t('assemble.审核通过') }}</p>
                    <p v-if="dataAll.state > 0" style="color: #0061D2;" @click="handlePayBook">{{ $t('assemble.查看付款通知') }}</p>
                </van-step>
                <van-step>
                    <p class="titletext">{{ $t('assemble.生产中') }}</p>
                </van-step>
                <van-step>
                    <p class="titletext">{{ $t('assemble.发货') }}</p>
                </van-step>
                <van-step>
                    <p class="titletext">{{ $t('assemble.订单完成') }}</p>
                </van-step>
            </van-steps>
        </div>


        <div class="titles">
            {{ $t('assemble.订单信息') }}
        </div>

        <div class="contentBox">
            <div>
                <div class="contentItem">
                    <div class="lable">
                        {{ $t('assemble.订单编号') }}:
                    </div>
                    <div class="value">
                        {{ dataAll.number }}
                    </div>
                </div>
                <div class="contentItem">
                    <div class="lable">
                        {{ $t('assemble.被授权商名称') }}:
                    </div>
                    <div class="value">
                        {{ dataAll.chinesename }}
                    </div>
                </div>
                <div class="contentItem">
                    <div class="lable">
                        {{ $t('assemble.授权区域') }}:
                    </div>
                    <div class="value">
                        {{ dataAll.user_area_id }}
                    </div>
                </div>
                <div class="contentItem">
                    <div class="lable">
                        {{ $t('assemble.授权渠道') }}:
                    </div>
                    <div class="value">
                        {{ dataAll.bazaar }}
                    </div>
                </div>
                <div class="contentItem">
                    <div class="lable">
                        {{ $t('assemble.授权品牌') }}:
                    </div>
                    <div class="value">
                        {{ dataAll.brand[0] }}
                    </div>
                </div>
                <div class="contentItem">
                    <div class="lable">
                        {{ $t('assemble.授权产品类别') }}:
                    </div>
                    <div class="value">
                        {{ dataAll.category }}
                    </div>
                </div>
                <div class="contentItem">
                    <div class="lable">
                        {{ $t('assemble.授权产品子类别') }}:
                    </div>
                    <div class="value">
                        {{ dataAll.brand[1] }}
                    </div>
                </div>

            </div>

            <div class="heng"></div>

            <div>
                <div class="contentItem">
                    <div class="lable">
                        {{ $t('assemble.制造商名称') }}:
                    </div>
                    <div class="value">
                        {{ manufacturer.manufacturer_name }}
                    </div>
                </div>
                <div class="contentItem">
                    <div class="lable">
                        {{ $t('assemble.制造商地址') }}:
                    </div>
                    <div class="value">
                        {{ manufacturer.manufacturer_site }}
                    </div>
                </div>
                <div class="contentItem">
                    <div class="lable">
                        {{ $t('assemble.联络人') }}:
                    </div>
                    <div class="value">
                        {{ manufacturer.liaisons }}
                    </div>
                </div>
                <div class="contentItem">
                    <div class="lable">
                        {{ $t('assemble.联系电话') }}:
                    </div>
                    <div class="value">
                        {{ manufacturer.manufacturer_mobile }}
                    </div>
                </div>
                <div class="contentItem">
                    <div class="lable">
                        {{ $t('assemble.邮编') }}:
                    </div>
                    <div class="value">
                        {{ manufacturer.manufacturer_postcode }}
                    </div>
                </div>
                <div class="contentItem">
                    <div class="lable">
                        {{ $t('assemble.备注') }}:
                    </div>
                    <div class="value">
                        {{ dataAll.remark }}
                    </div>
                </div>
                <div v-if="dataAll.state == -1" class="contentItem">
                    <div class="lable">
                        {{ $t('assemble.未通过原因') }}:
                    </div>
                    <div class="value">
                        {{ refusal }}
                    </div>
                </div>
            </div>

        </div>


        <div class="titles">
            {{ $t('assemble.商品信息') }}
        </div>


        <div class="productmessage">
            <img class="productimg" :src="dataAll.images" alt="">
            <div class="right_Box">
                <div class="name">{{ dataAll.name }}</div>
                <div class="value">{{ $t('assemble.单价') }}：￥{{ dataAll.price }}</div>
                <div class="value">{{ $t('assemble.数量') }}：{{ dataAll.num }}</div>
                <div class="value">Total：￥{{ dataAll.total }}</div>
            </div>
        </div>

        <div class="titles">
            {{ $t('assemble.代码范围') }}
        </div>

        <div class="codeBox">

        </div>


        <div class="titles">
            {{ $t('assemble.失效代码') }}
        </div>

        <div class="codeBox">

        </div>

        <div class="titles">
            {{ $t('assemble.标签物流资料') }}
        </div>

        <div class="contentBox">

            <div class="contentItem">
                <div class="lable">
                    {{ $t('assemble.商品收货人公司名称') }}:
                </div>
                <div class="value">
                    {{ dataAll.delivery.company }}
                </div>
            </div>
            <div class="contentItem">
                <div class="lable">
                    {{ $t('assemble.商品收货人姓名') }}:
                </div>
                <div class="value">
                    {{ dataAll.delivery.name }}
                </div>
            </div>
            <div class="contentItem">
                <div class="lable">
                    {{ $t('assemble.商品收货人联系电话') }}:
                </div>
                <div class="value">
                    {{ dataAll.delivery.mobile }}
                </div>
            </div>
            <div class="contentItem">
                <div class="lable">
                    {{ $t('assemble.商品收件人地址') }}:
                </div>
                <div class="value">
                    {{ dataAll.delivery.site }}

                </div>
            </div>
            <div class="contentItem">
                <div class="lable">
                    {{ $t('assemble.邮政编号') }}:
                </div>
                <div class="value">
                    {{ dataAll.delivery.postcode }}

                </div>
            </div>
            <div class="contentItem">
                <div class="lable">
                    {{ $t('assemble.商品物流单号') }}:
                </div>
                <div class="value">
                    {{ dataAll.trackingnumber }}
                </div>
            </div>

        </div>



        <div class="titles">
            {{ $t('assemble.开票资料') }}
        </div>


        <div class="contentBox">

            <div class="contentItem">
                <div class="lable">
                    {{ $t('assemble.发票类型') }}:
                </div>
                <div class="value">
                    {{ dataAll.invoice_type }}
                </div>
            </div>
            <div class="contentItem">
                <div class="lable">
                    {{ $t('assemble.购方名称') }}:
                </div>
                <div class="value">
                    {{ dataAll.invoice_name }}

                </div>
            </div>
            <div class="contentItem">
                <div class="lable">
                    {{ $t('assemble.购方税号') }}:
                </div>
                <div class="value">
                    {{ dataAll.invoice_number }}

                </div>
            </div>
        </div>


        <div class="titles">
            {{ $t('assemble.电子发票接收人资料') }}
        </div>


        <div class="contentBox">

            <div class="contentItem">
                <div class="lable">
                    {{ $t('assemble.电子发票收件人邮箱') }}:
                </div>
                <div class="value">
                    {{ dataAll.electronic_email }}
                </div>
            </div>
            <div class="contentItem">
                <div class="lable">
                    {{ $t('assemble.电子发票收件人手机号') }}:
                </div>
                <div class="value">
                    {{ dataAll.electronic_mobile }}
                </div>
            </div>
        </div>

        <div class="heiS"></div>



    </div>
</template>
<script>
import { getinfodata } from '../../utils/api'

export default {
    components: {

    },
    data() {
        return {
            content: "",
            lang: 'zh',
            dataAll: {},
            productimg: "",
            manufacturer: {},//制造商数据
            ranges: [],
            loseefficacys: [],
            refusal: "",

        }
    },
    created() {
        this.$i18n.locale = localStorage.getItem('langtype')
        this.lang = localStorage.getItem('langtype')
        this.getinfodataList(this.$route.query.id)


    },
    mounted() {
        if (localStorage.getItem("refusal") != "null") {
            this.refusal = localStorage.getItem("refusal")
        }
    },
    methods: {
        async getinfodataList(id) {
            let data = {
                id: id
            }
            let res = await getinfodata(data)
            if (res.code == 1) {
                // console.log("订单详情", res)
                this.dataAll = res.data
                this.productimg = this.dataAll.images.split(",")[0]
                this.dataAll.brand = this.dataAll.brand.split(",")
                this.dataAll.product = this.dataAll.product.split(",")
                this.manufacturer = this.dataAll.manufacturer ? JSON.parse(this.dataAll.manufacturer) : this.manufacturer
                for (var item in this.dataAll.range) {
                    this.ranges.push({ "key": item, "value": this.dataAll.range[item] })
                }
                for (var item in this.dataAll.loseefficacy) {
                    this.loseefficacys.push({ "key": item, "value": this.dataAll.loseefficacy[item] })
                }
                this.dataAll.txt_files.split(",")
                this.dataAll.txt_files = this.dataAll.txt_files.split("/")
                this.dataAll.txt_files = this.dataAll.txt_files[this.dataAll.txt_files.length - 1]
                this.dataAll.txt_files = this.dataAll.txt_files.slice(0, this.dataAll.txt_files.length - 4)
                // console.log("this.dataAll", this.dataAll.txt_files)
            } else {
                this.$message({
                    message: res.msg,
                    type: 'success'
                });
                this.$router.go(-1)
            }
        },
        handleBack() {
            this.$router.back(1)
        },
        handlePayBook() {
            localStorage.setItem("dataAll", JSON.stringify(this.dataAll))
            // this.$router.push({ path: '/home/payBook' })
            this.$router.push({ path: '/pages/order/payBox' })
        },
    },

}
</script>

<style scoped lang="scss">
.orderDetail {
    width: 100%;
    min-height: 100vh;
    background-color: #F8F8F8;
}

@media screen and (max-width: 750px) {
    .topBox {
        width: 100%;
        height: 44px;
        // padding: 10px 15px;
        padding-top: 10px;
        position: relative;
        font-family: PingFang SC, PingFang SC;
        font-weight: 600;
        font-size: 16px;
        color: #333333;
        line-height: 19px;
        text-align: left;
        font-style: normal;
        text-transform: none;
        background-color: #ffffff;

        .leftImg {
            width: 24px;
            height: 24px;
            position: absolute;
            top: 10px;
            left: 15px;
        }

        .title {
            width: 100%;
            text-align: center;

        }
    }

    .stepsBox {
        width: 100%;
        background-color: #ffffff;

        .titletext {
            font-weight: 800;
            font-family: PingFang SC, PingFang SC;
            font-size: 16px;
            color: #333333;
            line-height: 19px;
        }
    }


    .titles {
        width: 100%;
        padding: 15px;
        box-sizing: border-box;
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 16px;
        color: #333333;
        line-height: 19px;
    }


    .contentBox {
        width: 100%;
        padding: 15px;
        box-sizing: border-box;
        background-color: #ffffff;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 14px;
        color: #333333;
        line-height: 16px;


        .contentItem {
            display: flex;
            margin-bottom: 10px;

            .lable {}

            .value {
                margin-left: 10px;
            }
        }

        .heng {
            width: 90%;
            height: 1px;
            background-color: #EDEDED;
            margin: 20px auto;
        }
    }

    .productmessage {
        width: 100%;
        padding: 15px;
        box-sizing: border-box;
        height: 100px;
        display: flex;
        align-items: center;
        background-color: #ffffff;

        .productimg {
            width: 100px;
        }

        .right_Box {
            height: 70px;
            margin-left: 10px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            .name {
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                font-size: 14px;
                color: #333333;
                line-height: 16px;
                text-align: justified;
                font-style: normal;
                text-transform: none;
            }

            .value {
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                font-size: 12px;
                color: #666666;
                line-height: 14px;
                text-align: left;
                font-style: normal;
                text-transform: none;
            }
        }
    }

    .codeBox {
        width: 100%;
        padding: 20px;
        box-sizing: border-box;
        background-color: #ffffff;
    }


    .heiS {
        height: 50px;
    }

}

@media screen and (min-width: 751px) and (max-width: 1300px) {
    .topBox {
        width: 100%;
        height: 88px;
        // padding: 10px 15px;
        padding-top: 20px;
        position: relative;
        font-family: PingFang SC, PingFang SC;
        font-weight: 600;
        font-size: 25px;
        color: #333333;
        line-height: 19px;
        text-align: left;
        font-style: normal;
        text-transform: none;
        display: flex;
        align-items: center;
        background-color: #ffffff;


        .leftImg {
            width: 48px;
            height: 48px;
            position: absolute;
            top: 40px;
            left: 30px;
        }

        .title {
            width: 100%;
            text-align: center;

        }
    }


    .stepsBox {
        width: 100%;
        margin-top: 30px;
        padding: 30px;
        box-sizing: border-box;
        background-color: #ffffff;

        p {
            font-size: 24px;
        }

    }

    .titles {
        width: 100%;
        padding: 40px;
        box-sizing: border-box;
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 24px;
        color: #333333;
        line-height: 19px;
    }

    .contentBox {
        width: 100%;
        padding: 40px;
        box-sizing: border-box;
        background-color: #ffffff;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 22px;
        color: #333333;
        line-height: 22px;


        .contentItem {
            display: flex;
            margin-bottom: 20px;

            .lable {}

            .value {
                margin-left: 10px;
            }
        }

    }

    .productmessage {
        width: 100%;
        padding: 40px;
        box-sizing: border-box;
        height: 250px;
        display: flex;
        align-items: center;
        background-color: #ffffff;

        .productimg {
            width: 250px;
        }

        .right_Box {
            height: 170px;
            margin-left: 10px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            .name {
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                font-size: 24px;
                color: #333333;
                line-height: 24px;
                text-align: justified;
                font-style: normal;
                text-transform: none;
            }

            .value {
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                font-size: 20px;
                color: #666666;
                line-height: 14px;
                text-align: left;
                font-style: normal;
                text-transform: none;
            }
        }
    }


    .codeBox {
        width: 100%;
        padding: 40px;
        box-sizing: border-box;
        background-color: #ffffff;
    }

    .heiS {
        height: 100px;
    }

}
</style>